<template>
  <div class="resume">
    <div style=" margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270c1;background-color: white;width: 95%;margin-left: 12px">
      <div>
        <img src="/src/assets/hy/zhiwei.png" height="30" width="30" style="margin: 5px 10px 0px 0px"/>
      </div>
      <div style="text-align: center;line-height: 40px;">简历管理：</div>
    </div>
    <div class="shouts" style="margin-top: 20px;">
      <div style="float: right;margin: 20px 30px 0px 0px">
        <el-dropdown style="margin-left: 20px">
        <el-button type="primary">
          更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item><span @click="addTalentpool()">新增</span></el-dropdown-item>
            <el-dropdown-item><span>加入人才库</span></el-dropdown-item>
              <el-dropdown-item>
                <el-upload
                  class="upload-demo"
                  multiple=""
                  method="post"
                  action="http://localhost:3688/personnelOa/Talentpool/daoru"
                  style="margin-left: 10px"
                  accept=".xlsx,.xls"
                  :show-file-list="false"
                  :on-success="success"
                  name="files">
                  <el-button style="margin-right: 10px">导入</el-button>
                </el-upload>
              </el-dropdown-item>
            <el-dropdown-item><el-button style="margin-left: 10px">导出</el-button></el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      </div>
      <div style="margin: 20px 10px">
      <el-input v-model="form3.talentsName" placeholder="姓名" style="width: 220px;"/>
        <el-select :value="form2.type" v-model="form3.postName" clearable placeholder="应聘岗位"  style="width: 190px;margin-left: 20px">
          <el-option
              v-for="p in form2.type"
              :label="p.postName"
              :value="p.postName"

          />
        </el-select>
        <el-select :value="d.educationList" v-model="form3.educationName" placeholder="学历" style="width: 190px;margin-left: 20px">
          <el-option v-for="c in d.educationList"
                     :label="c.educationName"
                     :key="c.educationId"
                     :value="c.educationName" />
        </el-select>
        <el-select :value="d.experienceList" v-model="form3.experienceName" placeholder="工作经验" style="width: 190px;margin-left: 20px">
          <el-option v-for="d in d.experienceList"
                     :label="d.experienceName"
                     :key="d.experienceId"
                     :value="d.experienceName" />
        </el-select>
        <el-button @click="selectR()" type="primary" style="margin-left: 20px" >搜索</el-button>
        <el-button  @click="qingkong()"  plain>重置</el-button>
    </div>
  </div>
    <div class="table">
      <el-table
          ref="multipleTableRef"
          :data="d.tableData"
          style="width: 98%;height: 455px;margin: auto"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="{background:'#f5f7fa'}"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="姓名"  >
          <template #default="scope">
            <el-button @click="editTalentpool(scope.row)">{{ scope.row.talentsName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" property="talentsSex" label="性别">
          <template #default="s">
            {{s.row.talentsSex == 0? "女":"男"}}
          </template>
        </el-table-column>
        <el-table-column align="center" property="talentsPosition" label="应聘岗位" show-overflow-tooltip />
        <el-table-column align="center" property="talentsChannel" label="人才渠道" />
        <el-table-column align="center" property="talentsEducation" label="最高学历"  />
        <el-table-column align="center" property="talentsExperience" label="工作经验"  />
        <el-table-column align="center" property="name" label="添加人才库"  >
          <template #default ="s" >
<!--            <el-button v-if="s.row.talentsState==2"  type="primary" plain style="font-size: 12px;width: 60px;height: 30px;">-->
<!--              已添加-->
<!--            </el-button>-->
            <div v-if="s.row.talentsState==2" style="background:rgb(217,246,229);color:#479d5c;height:30px;width:60px;margin:0 27% 0;font-size: 12px;line-height: 30px;border: 1px solid #479D5C;border-radius: 4px" >
              已添加
            </div>
            <el-button v-if="s.row.talentsState==1" @click="update(s.row.talentsId)" type="primary" plain style="font-size: 12px;width: 60px;height: 30px;">
              添加人才
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" property="name" label="操作"  >
          <template #default ="s" >
            <el-button @click="qqq(s.row.talentsId,s.row.talentsState)" type="danger" plain style="font-size: 13px;width: 60px;height: 30px;">
             删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-dialog v-model="centerDialogVisible" title="信息确认" width="30%" center>
          <span>确定删除吗？</span>
          <template #footer>
              <span class="dialog-footer">
                <el-button @click="deleteId()">确认</el-button>
                <el-button type="primary" @click=" centerDialogVisible = false;">取消</el-button
                >
              </span>
          </template>
        </el-dialog>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
const value = ref('')
const form2 = reactive({
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //数据
  tableData:[],
  //人才渠道数据
  sourceList:[],
  //学历数据
  educationList:[],
  //工作经验数据
  experienceList:[],
});

//导入
const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
//添加人才库
let add2=ref();//新增的返回结果
const update=(id)=>{
  axios.put("personnelOa/talentpool/update2/"+id)
      .then((res)=>{
      add2.value = res.data.data
        if(add2.value ==4 ){
          ElMessage({
            type: 'success',
            message: '添加成功',
          })
          date();
        }
      })
      .catch()
}
//下拉框表单数据模型
let form3 = reactive({
  talentsName:'',
  postName:'',
  educationId:'',
  educationName:'',
  experienceId:'',
  experienceName:'',
  sourceId:'',
  sourceName:'',
})
const qingkong=()=>{
      form3.postName='',
      form3.sourceName='',
      form3.talentsName='',
      form3.educationName='',
      form3.experienceName=''
  date();
}
const selectR=()=>{
  console.log(form3 )
  axios.post("personnelOa/talentpool/selectResume",form3)
      .then((res)=>{
        console.log("婚姻")
        console.log(form3)

          d.tableData = res.data.data;
          ALltableData.value = d.tableData;//放入表格
          d.total = res.data.data.length;//获得它的长度
          // getTabelData();//调用方法
      })
      .catch()
}
//查询出所有的工作经验
const experience =()=>{
  axios.post("personnelOa/Experience/selectlist")
      .then((res)=>{
        d.experienceList = res.data.data
        console.log(d.experienceList)

      })
}
//查询出所有学历
const education =()=>{
  axios.post("personnelOa/Education/selectlist")
      .then((res)=>{
        d.educationList = res.data.data
        console.log(d.educationList)

      })
}
//查询出所有用工来源
const source =()=>{
  axios.post("personnelOa/source/selectlist")
      .then((res)=>{
        d.sourceList = res.data.data
        console.log(d.sourceList)

      })
}
//查询出人才并分页
const date=()=>{
  axios.post("personnelOa/talentpool/selectjianli")
      .then((res)=>{
        console.log(res.data.data)
        d.tableData =res.data.data;
        ALltableData.value = d.tableData;//放入表格
        d.total = res.data.data.length;//获得它的长度
        // getTabelData();//调用方法
      })
      .catch()
}
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  console.log("翻页，当前为第几页", val)
  d.pageNo = val;
  getTabelData();
}
//一进页面就调用
onBeforeMount(()=>{
  date();
  distinct();
  experience();
  education();
  source();
})
//表单数据模型
let Talentpool = reactive({
  talentsName:'',
  talentsSex:'',
  talentsAge:'',
  talentsBirthday:'',
  talentsPosition:'',
  talentsChannel:'',
  talentsEducation:'',
  talentsExperience:'',
  talentsPhone:'',
  talentsTime:'',
  talentsTechnology:'',
  talentsState:'',
  talentsMailbox:'',
  talentsId:'',
})
const router=useRouter();
//进入简历详情页面
const editTalentpool = (Talentpool)=>{
  console.log(Talentpool)
  router.push({path:"/Recruitment/resume/tiao",query:{id:Talentpool.talentsId}})
}
const addTalentpool = ()=>{
  router.push({path:"/Recruitment/resume/tiao",query:{id:0}});
}
//删除简历
const centerDialogVisible = ref(false)
let ID = ref();
let talentsStates =ref();
const qqq = (id,talentsState)=>{
  ID.value = id;
  talentsStates.value = talentsState;
  centerDialogVisible.value = true

}

let del=ref();
const deleteId=()=>{
  centerDialogVisible.value = false;
  if(talentsStates.value == 1 ){
    axios.delete("personnelOa/talentpool/deleteTalentpools/"+ID.value)
        .then((res)=>{
          del.value = res.data.data
          console.log(res.data.data)
          if (del.value > 0){
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
            date();
          }else {
            ElMessage({
              type: 'success',
              message: '删除失败',
            })
          }
        })
        .catch()
  }else {
    ElMessage({
      type: 'success',
      message: '请先取消人才！',
    })
  }

}
const distinct=()=>{
  axios.post("personnelOa/SysPost/post")
      .then((res)=>{
        form2.type =res.data.data
        console.log(form2)
      })
      .catch()
}
import {
  Search,
} from '@element-plus/icons-vue'
import axios from "axios";
import {ElMessage, ElTable, genFileId, UploadInstance, UploadProps, UploadRawFile} from "element-plus";
import {useRouter} from "vue-router";
import {User} from "@element-plus/icons-vue/dist/types";
</script>

<style scoped>
.resume{
  width: 100%;
  height: 100%;
  background: #F1F1F1;
  overflow: hidden;
}
.tou{
  width: 100%;
  height: 60px;
  /*background: gold;*/
}
.shouts{
  width:98%;
  height: 70px;
  background: #FFFFFF;
  border: 1px solid #F1F1F1;
  float: right;
  margin-right: 12px;
}
</style>